<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


    <link rel="stylesheet" href="sass/common.css">
    <link rel="stylesheet" href="sass/product.css">
    <link rel="stylesheet" href="sass/index.css">
    <!-- Link Swiper's CSS -->
    <link rel="stylesheet" href="CSS/swiper-bundle.min.css" />
    <!-- <script src="JS/Jquery.min.js"></script> -->
    <script src="JS/jquery-1.11.0.min.js"></script>
    <script src="JS/product.js"></script>
    <!-- <script src="JS/animate.js"></script> -->
    <!-- Swiper JS -->
    <script src="JS/swiper-bundle.min.js"></script>
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }
        
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        
        .swiper {
            width: 100%;
            height: 100%;
        }
        
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        html,
        body {
            position: relative;
            height: 100%;
        }
        
        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }
        
        .swiper {
            width: 100%;
            height: 100%;
        }
        
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        
        .swiper-slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .swiper {
            margin-left: auto;
            margin-right: auto;
        }
        
        .swiper-button-next {
            color: #fff;
            background-color: #0505054d;
        }
        
        .swiper-button-prev {
            color: #fff;
            background-color: #0505054d;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="container">
            <!-- 头部搜索栏 -->
            <div class="header">
                <div class="login">
                    <a href="#" class="log" onclick="procartBtn()">购物车</a> &emsp;
                    <!-- <a href="#" class="register">0</a> -->
                </div>
                <div class="logo">
                    <div class="img">
                        <img src="img/logo-foot.png" alt="">
                    </div>
                    <div class="title">
                        <h3>熊猫优选</h3>
                        <span>xiong mao you xuan</span>
                    </div>
                </div>
                <div class="wrapper-search">
                    <div class="search">
                        <span>🔍</span>
                        <input type="text" placeholder="搜索商品. 发现更多优惠">
                        <div class="search-btn">搜索</div>
                    </div>
                </div>
                <div class="advantage">
                    <ul>
                        <li>
                            <img src="img/全程包邮.png" alt="">
                            <span>全程包邮</span>
                        </li>
                        <li>
                            <img src="img/七天退换.png" alt="">
                            <span>7天退换</span>
                        </li>
                        <li>
                            <img src="img/品质保证.png" alt="">
                            <span>品质保证</span>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <!-- 横条栏 -->
        <div class="normal">
            <div class="container">
                <ul>
                    <li class="active"><a href="index.html">首页</a></li>
                    <!-- <li>9块9包邮</li>
                    <li>超值大额券</li>
                    <li>降温急救穿搭</li> -->
                </ul>
            </div>
        </div>


        <!-- 商品列表区 -->
        <div class="pc-view">
            <div class="container1">
                <!-- <div class="commodity">
                    <div class="left">
                        <div class="photos">

                            <div class="swiper mySwiper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide"><img src="img/彩虹雨伞.jpeg" alt=""></div>
                                    <div class="swiper-slide"><img src="img/扫码下载app.png" alt=""></div>
                                    <div class="swiper-slide"><img src="img/护妍天使痘痘贴.jpeg" alt=""></div>
                                    <div class="swiper-slide"><img src="img/抹茶粉烘焙.jpeg" alt=""></div>
                                    <div class="swiper-slide"><img src="img/拉芳沐浴露.jpeg" alt=""></div>
                                    <div class="swiper-slide">Slide 6</div>
                                    <div class="swiper-slide">Slide 7</div>
                                    <div class="swiper-slide">Slide 8</div>
                                    <div class="swiper-slide">Slide 9</div>
                                </div>
                                <div class="swiper-pagination"></div>
                            </div>
                        </div>
                        <div class="discount">
                            <h1 class="title">
                                <div class="title-icon">
                                    <img src="img/淘宝小logo.png" alt="" class="platform">
                                    <img src="img/包邮小logo.png" alt="" class="free-postage">
                                </div>
                                925纯银可爱猫咪铃铛手链女款韩版简约可爱学生配饰森系闺蜜首饰
                            </h1>
                            <div class="price">
                                <p class="original-price">
                                    <i>原价¥13.9</i>
                                </p>
                                <div class="last-price">
                                    <span font-size: 20px; class="num"> 券后价:</span>
                                    <span class="nowprice">
                                        <i class="value-tag" font-size: 20px;>¥</i>
                                        <span class="big">11</span>

                                    <span class="digit"> .9</span>
                                    </span>
                                    <span class="coupou-info">两元券</span>
                                    <span class="sale-num">272人已买</span>
                                </div>
                            </div>
                            <p class="limit">
                                <span>优惠有效期:2021-11-18</span>
                            </p>
                            <br> <br> <br>
                            <div class="clear">
                                <button class="goBtn">领券购买</button>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="content">
                            <span class="line"></span>
                            <span class="txt">卖家信息</span>
                            <span class="line"></span>
                        </div>
                        <img src="img/卖家信息.jpeg" alt="">
                        <div class="shop-name"></div>
                        <div class="shop-score">
                            <ul class="character">
                                <li>描述</li>
                                <li>服务</li>
                                <li>物流</li>
                            </ul>
                            <ul class="score">
                                <li>4.8</li>
                                <li>4.8</li>
                                <li>4.8</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="cmd-detail">
                    <div class="imgs">
                        <img src="img/彩虹雨伞.jpeg" alt="">
                        <img src="img/彩虹雨伞.jpeg" alt="">
                        <img src="img/彩虹雨伞.jpeg" alt="">
                        <img src="img/彩虹雨伞.jpeg" alt="">
                        <img src="img/彩虹雨伞.jpeg" alt="">
                    </div>
                </div> -->
            </div>
        </div>

        <!-- 页脚 -->
        <div class="basefooter">
            <div class="container">
                <img src="img/logo-foot.png" alt="">
                <div class="content">
                    <h1 class="title">熊猫优选</h1>
                    <p class="slogan">年轻人网购首选 <br>购物领券更省钱 </p>
                </div>
                <div class="about-us">
                    <p>
                        <span>|</span>
                        <a href="#">下载APP</a>
                    </p>
                </div>
                <div class="footer">

                    <p>
                        <img src="img/警徽.png" alt="">
                        <span>浙公安网备案 33010602009949号 |</span>ICP备案号:
                        <a href="#">浙ICP备17012864号-1 |</a>
                    </p>

                    <p><img src="img/电子营业执照.png" alt=""><a href="#">证照信息</a></p>
                </div>
            </div>
        </div>
        <!-- 全国安全 -->
        <div class="security">
            <img src="img/全国安全可信网站.png" alt="">
        </div>
        <!-- 返回顶部 -->
        <div class="return1">
            <img src="img/返回顶部.png" alt="" class="goBack">
        </div>
    </div>





    <!-- Initialize Swiper -->
    <script>
        var swiper = new Swiper(".mySwiper", {
            spaceBetween: 30,
            centeredSlides: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: ".swiper-pagination",
                clickable: true,
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });
    </script>

</body>

</html>